<template>
  <div class="">
    <!-- <h1>列表页面</h1> -->
    <!-- <button @click="getdata">请求数据</button> -->
    <div class="wrap">
      <ul class="nav">
        <li
          class="center"
          v-for="(item, index) in fenlei"
          :key="item._id"
          @click="change(item._id, index)"
          :class="{ bg: flag == index }"
        >
          {{ item.title }}
        </li>
      </ul>
    </div>
    <!-- 商品导航分类 -->

    <ul class="con">
      <li v-for="item in list" :key="item._id" v-show="item.cid == currentid">
        <img :src="item.pic" alt="" />
        <h6>{{ item.title }}</h6>
      </li>
      <!-- 对展示的dom节点进行筛选 -->
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fenlei: [],
      list: [],
      //所有的商品
      // result: [],
      //保存筛选出来的数据
      flag: 0,
      currentid: "",
      //用来保存当前点击的分类的id
    };
  },
  mounted() {
    this.getdata();
    //一进入页面获取分类数据
    this.getlist();
    //一进入页面获取商品列表数据
  },
  methods: {
    getdata() {
      this.$axios
        .get("fenlei.json")
        .then((res) => {
          console.log(res);
          this.fenlei = res.data.result;
        })
        .catch((err) => {});
    },
    getlist() {
      this.$axios.get("list.json").then((res) => {
        console.log(res);
        this.list = res.data.result;
        this.change("59f1e1ada1da8b15d42234e9", 0);
        //拿到list数据之后才能筛选
      });
    },
    change(id, index) {
      this.flag = index;
      this.currentid = id;
      // this.result = this.list.filter((item) => {
      //   return item.cid == id;
      // });
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
// 如果想让这个样式只在这个组件中起作用 就要加上scoped
.wrap {
  width: 100%;
  overflow: scroll;
}
.nav {
  display: flex;
  height: 50px;

  li {
    width: 80px;
    flex-shrink: 0;
    //不缩小
  }
}
.con {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  li {
    width: 50%;
    flex-direction: column;
    //方向变成竖向
    text-align: center;

    img {
      width: 80%;
      height: auto;
    }
  }
}
.bg {
  background: #ccc;
  color: aliceblue;
}
</style>
